<template>
    <div class="home-video-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="关键词搜索"
                style="width:200px;"
                @keyup.enter.native="getList(1)"
                clearable
                v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <!-- <el-input
                placeholder="请输入创建人"
                @keyup.enter.native="getList(1)"
                style="width:200px;margin-left:10px;"
                clearable
                v-model.trim="creator">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input> -->
            <el-select
                style="margin-left:16px;width:390px"
                v-model="gameId"
                clearable
                filterable
                @change="getList(1)"
                :filter-method="filterMethod"
                :loading="gameLoading"
                placeholder="请输入并选择游戏">
                <el-option
                    v-for="item in gameList"
                    :key="item.gameid"
                    :label="item.appName"
                    :value="item.gameid">
                    <span style="float: left">
                        <span>{{ item.appName }}</span>
                        <span v-if="item.status === -1" style="color:red;font-size:12px;margin:0 5px;">下架</span>
                    </span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.gameid }}</span>
                </el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
            <el-button type="success" class="btn" @click="goVideoDetail(0)">新建</el-button>
        </div>
        <div class="input-box">
            <span class="input-title" style="margin-left:0px;">视频种类</span>
            <el-select
                @change="getList(1)"
                style="width:120px;"
                v-model="type">
                <el-option label="全部" :value="3"></el-option>
                <el-option label="官方制作" :value="0"></el-option>
                <el-option label="用户制作" :value="1"></el-option>
                <el-option label="趣游戏制作" :value="2"></el-option>
            </el-select>
            <span class="input-title">视频来源</span>
            <el-select
                @change="getList(1)"
                style="width:100px;"
                v-model="sourceFrom">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="微博" value="微博"></el-option>
                <el-option label="taptap" value="taptap"></el-option>
                <el-option label="用户上传" value="用户上传"></el-option>
                <el-option label="后台上传" value="后台上传"></el-option>
            </el-select>
            <span class="input-title">审核状态</span>
            <el-select
                @change="getList(1)"
                style="width:140px;"
                v-model="status">
                <el-option label="全部" :value="999"></el-option>
                <el-option label="下架" :value="-2"></el-option>
                <el-option label="自动审核失败" :value="-1"></el-option>
                <el-option label="待审核（阿里审核中)" :value="0"></el-option>
                <el-option label="自动审核通过" :value="1"></el-option>
                <el-option label="人工审核通过" :value="2"></el-option>
            </el-select>
            <span class="input-title">游戏状态</span>
            <el-select
                @change="getList(1)"
                style="width:100px;"
                v-model="gameStatus">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="下架" :value="0"></el-option>
                <el-option label="上架" :value="1"></el-option>
            </el-select>
        </div>
        <div class="input-box">
            <el-button type="success" @click="goAuditVideoDetail">快速审核</el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    width="100"
                    prop="videoid"
                    label="id">
                </el-table-column>
                <el-table-column
                    width="180"
                    label="视频标题/描述">
                    <template slot-scope="scope">
                        <div>{{scope.row.title || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180"
                    label="视频">
                    <template slot-scope="scope">
                        <videoBox v-if="scope.row.url || scope.row.mp4Url" :url="scope.row.mp4Url || scope.row.url" :time="scope.row.duration" :img="scope.row.cover"/>
                        <div v-else>暂无视频</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="240"
                    label="用户信息">
                    <template slot-scope="scope">
                        <div style="padding: 5px 0;">
                            <div>
                                <b>用户昵称：</b>
                                <img :src="scope.row.userIcon" alt="" class="user-icon">
                                <span class="table-btn" @click="goUserDetail(scope.row.userid)">{{scope.row.userName || scope.row.userid}}</span>
                            </div>
                            <div>
                                <b>用户ID：</b>
                                <span>{{scope.row.userid || '-'}}</span>
                            </div>
                            <div>
                                <b>上传时间：</b>
                                <span>{{(scope.row.createTime || '-') | timeNo0}}</span>
                            </div>
                            <div>
                                <b>已传视频数：</b>
                                <span>{{scope.row.userVideoCount || '0'}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="游戏首页推荐">
                    <template slot-scope="scope">
                        <span v-if="scope.row.showHome">是</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="游戏首页展示位">
                    <template slot-scope="scope">
                        <span v-if="scope.row.homeIndex">{{scope.row.homeIndex}}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="视频种类">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type === 0">官方制作</span>
                        <span v-if="scope.row.type === 1">用户制作</span>
                        <span v-else-if="scope.row.type === 2">趣游戏制作</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    label="视频来源">
                    <template slot-scope="scope">
                        <span>{{scope.row.sourceFrom || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180"
                    label="关联游戏">
                    <template slot-scope="scope">
                        <div v-if="scope.row.gameid" @click="goGameDetail(scope.row)" class="table-btn">{{scope.row.gameName || '-'}}</div>
                        <div v-else>{{scope.row.gameName || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="游戏状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.gameStatus === '1'" style="color:#67C23A;">已上架</span>
                        <span v-else style="color: #F56C6C;">已下架</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="话题">
                    <template slot-scope="scope">
                        <span>{{scope.row.gameTopic || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="100"
                    label="用户打赏">
                    <template slot-scope="scope">
                        <span>{{moneyInit(scope.row.rewardCoinNum)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="240"
                    label="运营打赏">
                    <template slot-scope="scope">
                        <div v-if="scope.row.videoReward">
                            <b>打赏金币：</b>
                            <span>{{scope.row.videoReward / 10000}}万金币</span>
                        </div>
                        <div v-else>未打赏</div>
                        <div v-if="scope.row.videoReward && scope.row.videoRewardTime">
                            <b>打赏时间：</b>
                            <span>{{scope.row.videoRewardTime | timeNo0}}</span>
                        </div>
                        <div v-if="scope.row.videoReward">
                            <b>打赏金额：</b>
                            <span>{{scope.row.videoReward / 10000}}元</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="thumbsNum"
                    label="点赞数">
                </el-table-column>
                <el-table-column
                    prop="commentNum"
                    label="点评数">
                </el-table-column>
                <el-table-column
                    label="举报数">
                    <template slot-scope="scope">
                        <span>{{scope.row.complainNum || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="playNum"
                    label="播放量">
                </el-table-column>
                <el-table-column
                    prop="auditStatus"
                    width="150"
                    fixed="right"
                    label="视频审核状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.auditStatus === -3">已删除</div>
                        <div style="color: #F56C6C;" v-else-if="scope.row.auditStatus === -2">
                            <div class="point red-point"></div>
                            <span>下架</span>
                        </div>
                        <div style="color: #F56C6C;" v-else-if="scope.row.auditStatus === -1">自动审核失败</div>
                        <div v-else-if="scope.row.auditStatus === 0">待审核（阿里审核中)</div>
                        <div style="color:#67C23A;" v-else-if="scope.row.auditStatus === 1">自动审核通过</div>
                        <div style="color:#67C23A;" v-else-if="scope.row.auditStatus === 2">
                            <span class="point"></span>
                            <span>人工审核通过</span>
                        </div>

                        <div v-if="scope.row.auditStatus >= 2 && scope.row.verifyName">
                            <b>审核人：</b>
                            <span>{{scope.row.verifyName}}</span>
                        </div>
                        <div v-if="scope.row.auditStatus >= 2 && scope.row.verifyTime">
                            <b>审核时间：</b>
                            <span>{{scope.row.verifyTime | timeNo0}}</span>
                        </div>
                        <div v-if="scope.row.auditStatus === -2">
                            <b>原因：</b>
                            <span>{{scope.row.auditReason || '-'}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.auditStatus >= 0">
                            <div><el-button @click="beforeRefusedUser(scope.row)" type="text" size="small" style="color: #F56C6C;">下架</el-button></div>
                        </div>
                        <div v-if="scope.row.auditStatus >= 1">
                            <div v-if="scope.row.gameid && scope.row.videoid && scope.row.showType && scope.row.showHome === 0"><el-button @click="updateGameVideoShowHome(scope.row)" type="text" size="small" style="color:#E6A23C;">首页推荐</el-button></div>
                            <div v-if="!scope.row.videoReward && userInfo.id === 11"><el-button @click="giveUserMoney(scope.row)" type="text" size="small" style="color: #F56C6C;">打赏</el-button></div>
                        </div>
                        <!-- 下架、自动审核失败 才有删除 -->
                        <div v-if="scope.row.auditStatus === -2 || scope.row.auditStatus === -1">
                            <div><el-button @click="delVideo(scope.row.videoid, scope.$index)" type="text" size="small">删除</el-button></div>
                        </div>
                        <!-- 人工审核通过后无需再通过 -->
                        <div v-if="scope.row.auditStatus !== 2"><el-button  style="color:#67C23A;" @click="changeVideoStatus(scope.row, 2)" type="text" size="small">通过</el-button></div>
                        <!-- 查看详情 -->
                        <div><el-button @click="goVideoDetail(scope.row.videoid)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            title="温馨提示"
            :visible.sync="dialogVisible">
            <span>确认要删除该视频么？</span>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confimDelVideo">确定删除</el-button>
            </span>
        </el-dialog>

        <!-- 拒绝用户 -->
        <el-dialog
            class="show-refused-user-box"
            title="下架原因"
            :close-on-click-modal="false"
            :show-close="false"
            :visible.sync="showRefusedUser"
            width="600px">
            <el-radio-group v-model="radioTxt">
                <el-radio-button class="radio-item" label="非游戏">非游戏</el-radio-button>
                <el-radio-button class="radio-item" label="质量低">质量低</el-radio-button>
                <el-radio-button class="radio-item" label="不宜展示">不宜展示</el-radio-button>
                <el-radio-button class="radio-item" label="优化标题">优化标题</el-radio-button>
                <el-radio-button class="radio-item" label="关联游戏错误">关联游戏错误</el-radio-button>
                <el-radio-button class="radio-item" label="关联视频类型错误">关联视频类型错误</el-radio-button>
                <el-radio-button class="radio-item" label="黑屏">黑屏</el-radio-button>
            </el-radio-group>
            <el-input
                ref="textarea"
                type="textarea"
                :rows="2"
                placeholder="请输入下架原因"
                v-model="textarea">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="showRefusedUser = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="refusedUser">确定下架</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            keyword: '', // 关键词
            creator: '', // 创建人
            type: 3, // 视频种类
            gameId: '', // 游戏查询
            sourceFrom: '全部', // 视频来源
            status: 999, // 状态
            gameStatus: -1,
            gameList: [],
            gameLoading: false,
            tableData: [],
            publisherType: '',
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false,
            dialogVisible: false,
            userInfo: {},
            showRefusedUser: false, // 拒绝用户
            radioTxt: '非游戏',
            textarea: ''
        }
    },

    watch: {
        textarea (val) {
            if (val) {
                this.radioTxt = ''
            }
        },
        radioTxt (val) {
            if (val) {
                this.textarea = ''
            }
        }
    },

    activated () {
        this.getUserInfo()
        // 更好的缓存数据
        if (this.listParams) {
            this.keyword = this.listParams.keyword || this.keyword
            this.gameId = this.listParams.gameId || this.gameId
            this.creator = this.listParams.creator || this.creator
            this.gameList = this.listParams.gameList || this.gameList
            this.sourceFrom = this.listParams.sourceFrom || this.sourceFrom
            this.status = this.listParams.status || this.status
            this.gameStatus = this.listParams.gameStatus || this.gameStatus
        }
        this.getList(this.pageNum)
    },
    methods: {
        getUserInfo () {
            let userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
        },

        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            this.listParams = {
                pageIndex: pageNum,
                pageNum: this.pageSize
            }
            if (this.type !== 3) {
                this.listParams.type = this.type
            }
            if (this.keyword) {
                this.listParams.keyword = this.keyword
            }
            if (this.gameId) {
                this.listParams.gameId = this.gameId
            }
            if (this.creator) {
                this.listParams.creator = this.creator
            }
            if (this.sourceFrom !== '全部') {
                this.listParams.sourceFrom = this.sourceFrom
            }
            if (this.status !== 999) {
                this.listParams.status = this.status
            }
            if (this.gameStatus !== -1) {
                this.listParams.gameStatus = this.gameStatus
            }
            let res = await this.$http.post('/video/findGameVideos', this.listParams)
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
                this.listParams.gameList = this.gameList
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 查询游戏
        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.gameLoading = false
                return
            }
            this.gameLoading = true
            this.timerId = setTimeout(() => {
                this.getgameList(res)
            }, 1000)
        },
        async getgameList (keyword) {
            let params = {
                keyword,
                pkgType: 0,
                pageIndex: 1,
                pageNum: 100
            }
            let res = await this.$http.post('/game/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },

        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        // 设置为首页推荐
        async updateGameVideoShowHome (item) {
            let params = {
                gameId: item.gameid,
                videoId: item.videoid
            }
            let res = await this.$http.post('/video/updateGameVideoShowHome', params)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '设置成功！'
                })
                item.showHome = 1
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 更改视频状态
        async changeVideoStatus (item, status) {
            // 审核:-1审核不通过0审核中1审核通过 2下架 3上架
            let params = {
                videoId: item.videoid,
                status
            }
            let res = await this.$http.post('/video/updateGameVideoStatus', params)
            if (res.code === '0') {
                item.auditStatus = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 拒绝用户
        beforeRefusedUser (item) {
            this.currentItem = item
            this.showRefusedUser = true
        },

        // 拒绝用户
        async refusedUser () {
            if (!this.radioTxt && !this.textarea) {
                this.$message({
                    type: 'error',
                    message: '请输入或选择驳回理由!'
                })
                return
            }
            let params = {
                videoId: this.currentItem.videoid,
                status: -2,
                reason: this.radioTxt || this.textarea
            }
            let res = await this.$http.post('/video/updateGameVideoStatus', params)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '已下架'
                })
                this.currentItem.auditStatus = -2
                this.currentItem.auditReason = params.reason
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.showRefusedUser = false
        },

        // 查看视频详情
        delVideo (id, index) {
            this.currentId = id
            this.currentIndex = index
            this.dialogVisible = true
        },

        async confimDelVideo () {
            let params = {
                videoId: this.currentId
            }
            let res = await this.$http.post('/video/deleteGameVideo', params)
            if (res.code === '0') {
                this.tableData.splice(this.currentIndex, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: ''
                })
            }
            this.dialogVisible = false
        },

        // 打赏用户金币
        giveUserMoney (item) {
            this.$prompt('请输入打赏金额（1~100）元', '游兔布打赏', {
                confirmButtonText: '打赏',
                cancelButtonText: '取消',
                // inputPattern: /[0-9]/,
                inputValidator: (value) => {
                    if (value < 101 && value > 0) {
                        return true
                    }
                    return false
                },
                inputErrorMessage: '打赏范围为1~100元'
            }).then(({ value }) => {
                this.videoReward(item, value)
            }).catch(() => {
            })
        },

        async videoReward (item, money) {
            let res = await this.$http.post('/video/videoReward', {
                videoId: item.videoid,
                money
            })
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '打赏成功'
                })
                item.videoReward = money * 10000
                item.rewardCoinNum = item.rewardCoinNum - 0 + money * 10000
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 查看视频详情
        goVideoDetail (id) {
            if (id) {
                this.$router.push({
                    path: '/video/videoDetail',
                    query: {
                        id
                    }
                })
            } else {
                this.$router.push('/video/videoDetail')
            }
        },

        // 查看游戏详情
        goGameDetail (item) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id: item.gameid
                }
            })
            window.open(href, '_blank')
        },

        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: '/dataReport/userInfo',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 快速审核
        goAuditVideoDetail () {
            this.$router.push({
                path: '/video/auditVideoDetail'
            })
        },

        moneyInit (money) {
            if (money) {
                if (money >= 10000) {
                    let num = parseInt(money / 10)
                    let result = num / 1000
                    return result + '万金币'
                } else {
                    return money + '金币'
                }
            }
            return '0'
        }
    }
}
</script>

<style lang="scss" scoped>
    .home-video-list {
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            /deep/ td {
                padding: 0;
            }
            .user-icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                vertical-align: top;
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .show-refused-user-box {
            /deep/ .el-dialog__body {
                padding: 0 20px;
            }
            .radio-item {
                border: 1px solid #DCDFE6;
                margin-right: 10px;
                margin-bottom: 10px;
                /deep/ .el-radio-button__inner {
                    border: none;
                }
            }
        }
    }
</style>
